<template>
	<view class="box-bottom-fun">
		<view class="box-desc box-icon" @click="open_popup">
			<uni-icons class="deep-color deep-size2" type="help"></uni-icons>
			信息
		</view>
		<view class="box-rate box-icon" @click="open_popup_rate">
			<!-- star-filled -->
			<uni-icons class="deep-color deep-size2" type="star"></uni-icons>
			<!-- <uni-icons class="deep-color-size2" type="star-filled"></uni-icons> -->
			<text class="rate-text">{{ rate ? rate : '评' }}分</text>
		</view>
		<view @click="need_login" class="box-download box-icon">
			<uni-icons class="deep-color deep-size2" type="heart"></uni-icons>
			喜欢
		</view>
		<view @click="need_login" class="box-download box-icon">
			<uni-icons class="deep-color deep-size2" type="download"></uni-icons>
			下载
		</view>
	</view>
</template>

<script setup>
import { ref, defineProps } from 'vue'
import { need_login } from '../../../api'

const props = defineProps(['ref_PopupDescVue', 'ref_PopupRateVue', 'rate'])

const open_popup = function () {
	props.ref_PopupDescVue.open_popup()
}

const open_popup_rate = function () {
	props.ref_PopupRateVue.open_popup()
}
</script>

<style scoped lang="scss">
.box-bottom-fun {
	font-size: 32rpx;
	@extend .f-c-c-n;
	justify-content: space-between;
	width: 100%;
	padding: 20rpx 40rpx;
	box-sizing: border-box;
	border-radius: 100rpx;
	background-color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 30rpx rgba(184, 184, 184, 0.8);
	color: #000;
	.box-icon {
		@extend .f-c-c;
		flex-direction: column;
		// 保证整体位置不变化（评分变化时候）
		width: 80rpx;
	}

	.box-desc {
	}

	.box-rate {
		.rate-text {
		}
	}

	.box-download {
	}
}
</style>
